<template>
  <button id="location" @click="toCityView">
    <i class="fa-solid fa-location-dot"></i>
    {{ cityName.replace('市', '') }} --天气: {{ weather }}
  </button>
  <div id="map"></div>
  <div class="tip" :style="{ display: isThisCity || isShow ? 'none' : '' }">
    <div>定位到您在'{{ thisCity.replace('市', '') }}'</div>
    <div>
      <button @click="toThisCity">切换至{{ thisCity.replace('市', '') }}</button
      ><span @click="isShow = true">x</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance,ref } from 'vue'
import { app } from '@/main'
import router from '@/router'
import { storeToRefs } from 'pinia'
import { useOlMapStore } from '@/stores/olMap'
const { cityName, thisCity, isThisCity, weather, adcode } = storeToRefs(
  useOlMapStore()
)
const { handleClick, getGeoJson } = useOlMapStore()
const isShow = ref(false)
const key = '612ca544a280feb306d79c2cd3265c76'
let $map
const style = new ol.style.Style({
  // 形状
  fill: new ol.style.Fill({
    color: 'rgba(0,0,0,0.5)',
  }),
  /* 描边 */
  stroke: new ol.style.Stroke({
    color: '#ff2d51',
    width: 2,
  }),
  image: new ol.style.Circle({
    radius: 20,
    /* 填充色 */
    fill: new ol.style.Fill({
      color: 'rgba(0,0,0,0.5)',
    }),
    /* 描边 */
    stroke: new ol.style.Stroke({
      color: '#ff2d51',
      width: 2,
    }),
  }),
})
const getWeather = (adcode) => {
  $.ajax({
    url: `https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=${key}`,
  }).then((res) => {
    weather.value = res.lives[0].weather
  })
}

const toCityView = () => {
  router.push('/city')
}
const toThisCity = () => {
  cityName.value = thisCity.value
  setTimeout(() => {
    let map = app.config.globalProperties.$map
    // console.log(map.getLayers().getArray())
    let arr = map.getLayers().getArray()
    arr.forEach((layer, index) => {
      if (index === arr.length - 1) {
        map.removeLayer(layer)
      }
    })
    getGeoJson(key, map, style)
    getWeather(adcode.value)
  }, 800)
}
onMounted(() => {
  const { $map } = getCurrentInstance()
  const gaode = new ol.layer.Tile({
    title: '高德地图',
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
      wrapX: false,
      crossOrigin: 'Anonymous',
    }),
  })
  const map = new ol.Map({
    target: 'map',
    layers: [gaode],
    view: new ol.View({
      center: [114.3, 30.5],
      zoom: 4,
      projection: 'EPSG:4326',
    }),
  })
  /* 地图的全局属性(全局变量)的设置 */
  app.config.globalProperties.$map = map

  const source = new ol.source.Vector({
    wrapX: false,
  })
  const vector = new ol.layer.Vector({
    source: source,
    style,
  })
  map.addLayer(vector)
  setTimeout(() => {
    getGeoJson(key, map, style)
    getWeather(adcode.value)
  }, 800)
})
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
#location {
  width: 180px;
  height: 40px;
  background-color: #6528df;
  border: none;
  border-radius: 15px;
  top: 20px;
  left: 50px;
  position: fixed;
  z-index: 1000;
  color: #fff;
}
#location:hover {
  cursor: pointer;
  color: #eee;
}
.fa-solid {
  font-size: 18px;
}
.tip {
  position: fixed;
  width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  z-index: 1000;
  background-color: #333333d2;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%);
  border-radius: 10px;
  color: #fff;
}
.tip button {
  width: 80px;
  height: 35px;
}
.tip span {
  margin-left: 5px;
  font-size: 20px;
}
.tip span:hover {
  cursor: pointer;
  color: #eee;
}
</style>
